<template>
  <div
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <!--搜索栏-->
    <common-list-search-bar
      ref="commonListSearchBar"
      :field-arr="searchSittingArray"
      :search-list="searchList">
      <template slot="actButton">
        <el-button type="primary" @click="createUser">新增</el-button>
      </template>
    </common-list-search-bar>
    <common-list-table
      ref="myCommonListTable"
      :sitting="listTableSitting"
      :search-list="searchList">
      <template slot="actSlot" slot-scope="scope">
        <el-button type="success" @click="addMoney(scope)">增加余额</el-button>
        <el-button type="success" @click="createUser(scope)">编辑</el-button>
        <el-button type="primary" @click="changePassword(scope)">更改密码</el-button>
        <el-button type="danger" @click="del(scope)">删除</el-button>
      </template>
    </common-list-table>

    <create-member-dialog ref="createMemberDialog" :success-function="searchList"/>
  </div>
</template>

<script>

import CreateSysUserDialog from '../Dialog/CreateSysUserDialog'
import CreateMemberDialog from '../Dialog/CreateMemberDialog'

var fieldArr=DemoData.Member.field;
export default {
  name: 'MemberPage',
  components: {CreateMemberDialog, },
  mounted () {
    this.$refs.myCommonListTable.setListData(DemoData.Member.list)
    this.searchList()
  },
  data:function () {
    return {
      loading:false,
      // 搜索栏配置项
      searchSittingArray:Object.assign([],fieldArr),
      listTableSitting:{
        modelName:'会员管理',
        fieldArr:fieldArr,
        tableHeight:this.getTableHeight(),
        page:1,
        pageSize:20,
        defaultSort:{
          // prop:'username',
          // order:'descending',
        },
        actColumnWidth:350
      }
    }
  },
  methods:{
    getTableHeight:function () {
      var height=this.getWinSize().height-225
      return height>500?height:500
    },
    // 初始化查询
    searchList:function () {
      // 表格列表,查询参数
      var listTableForm=this.$refs.myCommonListTable.formData

      // 搜索栏,查询参数
      var searchBarForm=this.$refs.commonListSearchBar.getFormData()

      var form=Object.assign({},listTableForm,searchBarForm)
      // 如果有默认排序 && 默认排序数据未设置,就进行查询请求(默认排序设置会触发查询)
      if (this.listTableSitting.defaultSort && this.listTableSitting.defaultSort.prop && this.$refs.myCommonListTable.formData.sortOrder===''){
        return ''
      }
      let $this=this
      $this.loading=true
      $this.MyRequest($this.ApiDoNameSupplier+'Member/getList',form,function (data) {
        $this.$refs.myCommonListTable.setListData(data)
        $this.loading=false
        $this.$forceUpdate()
      })
    },
    // 显示详情
    changePassword:function (info) {
      this.$prompt('请输入 新密码', '『'+info.rowInfo.username+'』 更改密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[a-zA-Z0-9_-]{6,30}$/,//,
        inputErrorMessage: '新密码长度必须在6至30位之间'
      }).then(({ value }) => {
        let $this=this
        $this.loading=true
        $this.MyRequest($this.ApiDoNameSupplier+'Member/update',{
          id:info.rowInfo.id,
          password:value
        },function () {
          $this.loading=false
          $this.$message({
            type: 'success',
            message: '更改成功'
          });
          $this.$forceUpdate()
        })
      },function () {
        $this.loading=false
      }).catch(() => {

      });
    },
    addMoney:function (info) {
      this.$prompt('请输入 改变的金额', '『'+info.rowInfo.username+'』 操作余额', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'Number',//,
        inputErrorMessage: '必须符合数字格式'
      }).then(({ value }) => {
        let $this=this
        $this.loading=true
        $this.MyRequest($this.ApiDoNameSupplier+'Member/addMoney',{
          id:info.rowInfo.id,
          money:value
        },function () {
          $this.loading=false
          $this.$message({
            type: 'success',
            message: '【'+info.rowInfo.username+'】余额变动 '+(value+'')
          });
          $this.searchList()
          $this.$forceUpdate()
        },function (res) {
          $this.$message.error(res.message)
          $this.loading=false
        })
      }).catch(() => {

      });
    },
    // 删除单条数据
    del:function (info) {
      this.$confirm('您确认要进行该操作吗, 是否继续?', '系统提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let $this=this
        $this.loading=true
        $this.MyRequest($this.ApiDoNameSupplier+'Member/delete',{id:info.rowInfo.id},function () {
          $this.loading=false
          $this.$message({
            type: 'success',
            message: '删除成功'
          });
          $this.searchList()
          $this.$forceUpdate()
        },function (res) {
          $this.$message.error(res.message)
          $this.loading=false
        })
      })
    },
    // 创建/编辑-用户
    createUser:function (userInfoParams) {
      var userData={}
      if (userInfoParams && userInfoParams.rowInfo){
        userData=userInfoParams.rowInfo
      }
      this.$refs.createMemberDialog.open(userData)
    }
  }
}
</script>

<style scoped>

</style>
